<template>
    <div>
        <div style="margin: 10px;">
            <el-button type="primary" size="small" @click="openAddFaceAuthDialog">添加人脸授权</el-button>
            <el-button type="primary" size="small">修改人脸授权</el-button>
            <el-button type="danger" size="small">删除人脸授权</el-button>
        </div>
<!--        <div>-->
<!--            <el-table :data="combinations">-->
<!--                <el-table-column label="门组集合" prop="groupIds">-->
<!--                </el-table-column>-->
<!--                <el-table-column label="人员集合" prop="owners">-->
<!--                </el-table-column>-->
<!--            </el-table>-->
<!--        </div>-->
        <div style="margin: 10px">
            <el-collapse @change="" style="width: 80%">
                <el-collapse-item title="授权人脸列表" name="1">
                    <div>
                        <el-input type="text" placeholder="人员姓名"style="width: 300px;margin: 10px"></el-input>
                        <el-button type="primary" icon="el-icon-search">根据姓名查询</el-button>
                    </div>
                    <el-table
                            :data="faceAuthData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                            border
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="ownerCode"
                                label="人员编号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="owner"
                                label="人员姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="faceStartTime"
                                label="人脸起始时间"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="faceEndTime"
                                label="人脸截至时间"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="ownerSex"
                                label="人员性别"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="id"
                                label="人员id"
                                width="180">
                        </el-table-column>
<!--                        <el-table-column-->
<!--                                prop="faceAccredit"-->
<!--                                label="人脸认证"-->
<!--                                sortable-->
<!--                                width="180">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="featureFlag"-->
<!--                                label="特征标志"-->
<!--                                width="180">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="identityCard"-->
<!--                                label="身份识别"-->
<!--                                width="180">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="isValid"-->
<!--                                label="是否有效"-->
<!--                                width="180">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="roomNumber"-->
<!--                                label="房屋号"-->
<!--                                width="180">-->
<!--                        </el-table-column>-->
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </el-collapse-item>
                <el-collapse-item title="人脸授权任务列表" name="2">
                    <div>
                        <el-input type="text" placeholder="人员姓名"style="width: 300px;margin: 10px"></el-input>
                        <el-button type="primary" icon="el-icon-search">根据姓名查询</el-button>
                        <el-button type="primary" icon="el-icon-search" style="float: right"
                            @click="addFaceTask">生成人脸授权任务</el-button>
                    </div>
                    <el-table
                            :data="faceAuthTasks"
                            style="width: auto"
                            border>
                        <el-table-column
                                prop="deviceId"
                                label="设备id"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="deviceName"
                                label="设备名称"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="stat"
                                label="任务状态"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="validStartTime"
                                label="开始时间"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="validEndTime"
                                label="结束时间"
                                sortable
                                width="180">
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </el-collapse-item>
                <el-collapse-item title="访客人脸授权任务列表" name="3">
                    <div>
                        <el-input type="text" placeholder="人员姓名"style="width: 300px;margin: 10px"></el-input>
                        <el-button type="primary" icon="el-icon-search">根据姓名查询</el-button>
                    </div>
                    <el-table
                            :data="faceAuthData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                            border
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="faceAccredit"
                                label="人脸认证"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="faceEndTime"
                                label="人脸截至时间"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="featureFlag"
                                label="特征标志"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="id"
                                label="人员id"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="identityCard"
                                label="身份识别"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="isValid"
                                label="是否有效"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="owner"
                                label="人员姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="ownerCode"
                                label="人员编号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="ownerSex"
                                label="人员性别"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="roomNumber"
                                label="房屋号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="faceStartTime"
                                label="人脸起始时间"
                                width="180">
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div>
            <el-dialog
                    title="添加人脸授权"
                    :visible.sync="addFaceAuthDialog"
                    width="50%"
                    center>
                <el-form :model="addFaceAuthData" label-width="140px">
                    <el-form-item label="请选择添加的分组">
                        <el-select v-model="addFaceAuthData.groupIds" multiple placeholder="请选择">
                            <el-option
                                    v-for="item in groupOptions"
                                    :key="item.id"
                                    :label="item.groupName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="请选择添加的人员"
                        v-for="(item, index) in addFaceAuthData.owners">
                        <el-select v-model="item.ownerCode" clearable placeholder="请选择人员">
                            <el-option
                                    v-for="option in peopleOptions"
                                    :key="option.code"
                                    :label="option.name"
                                    :value="option.code">
                            </el-option>
                        </el-select>
                        <el-col>
                            <el-date-picker type="date" placeholder="选择开始时间" v-model="item.faceStartTime" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col >
                            <el-date-picker type="date" placeholder="选择结束时间" v-model="item.faceEndTime" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-button @click.prevent="removePerson(item)">删除</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addPerson">增加人员</el-button>
                        <el-button type="primary" @click="doAddFaceAuth">添加</el-button>
                        <el-button @click="closeAddFaceAuthDialog">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
  import {getAllFaceAuth, getAllPeople, getCardGroup, addFaceAuth, getFaceAuthTasks, addFaceAuthTask} from '@/api/faceauth'
  export default {
    name: 'FaceAuth',
    data(){
      return {
        combinations: [

        ],
        faceAuthData:[
          {
            certificateType: "",
            faceAccredit: 1,
            faceEndTime: "",
            faceStartTime: "",
            id: 0,
            identityCard: "",
            isValid: 0,
            owner: "",
            ownerCode: "",
            ownerSex: 0,
            roomNumber: ""
          },
        ],
        total: 5,
        pageSize: 10,
        currentPage: 1,
        owner: '',
        multipleSelection: [],
        addFaceAuthDialog: false,
        addFaceAuthData: {
          faceDevRelsStr: [],
          groupIds: [],
          owners: [
            {
              faceEndTime: "",
              faceStartTime: "",
              ownerCode: '',
              name: ''
            }
          ]
        },
        groupOptions: [
          {
            groupName: "",
            groupType: 1,
            id: 1,
            memo: ""
          },
        ],
        peopleOptions: [
          {
            code: '',
            name: ''
          }
        ],
        faceAuthTasks: []
      }
    },
    created() {
      this.initFaceAuthData()
      this.initFaceAuthTasks()
    },
    methods: {
      initFaceAuthData(){
        getAllFaceAuth(this.currentPage, this.pageSize, this.owner).then(resp => {
            if(resp){
              this.faceAuthData = resp.data.items
              this.total = this.faceAuthData.length
            }
        })
      },
      openAddFaceAuthDialog(){
        this.initGroupOptions()
        this.initPeopleOptions()
        this.addFaceAuthDialog = true;
      },
      closeAddFaceAuthDialog(){
        this.addFaceAuthData.groupIds = []
        this.addFaceAuthData.owners = [
          {
            faceEndTime: "",
            faceStartTime: "",
            ownerCode: {},
          }
        ]
        this.addFaceAuthDialog = false;
      },
      initGroupOptions(){
        let groupNameLikeStr = ''
        getCardGroup(groupNameLikeStr).then(resp => {
          this.groupOptions = resp.data.data
        })
      },
      initPeopleOptions(){
        let query = {
          pageNum: 1,
          pageSize: 10,
          deptIdsString: "1"
        }
        getAllPeople(query).then(resp => {
          if(resp){
            this.peopleOptions = resp.data.pageData
          }
        })
      },
      addPerson(){
        this.addFaceAuthData.owners.push({
          faceEndTime: '',
          faceStartTime: '',
          // ownerCode: {},
          ownerCode: '',
        });
      },
      removePerson(item){
        let index = this.addFaceAuthData.owners.indexOf(item)
        if (index !== -1) {
          this.addFaceAuthData.owners.splice(index, 1)
        }
      },
      doAddFaceAuth(){
        console.log(this.addFaceAuthData.owners)
        addFaceAuth(this.addFaceAuthData).then(resp => {
          if(resp){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.addFaceAuthData.groupIds = []
            this.addFaceAuthData.owners = [
              {
                faceEndTime: "",
                faceStartTime: "",
                ownerCode: {},
              }
            ]
            this.initFaceAuthData()
            this.addFaceAuthDialog = false;
          }
        })
      },
      initFaceAuthTasks(){
        let query = {}
        getFaceAuthTasks(query).then(resp => {
          if(resp){
            this.faceAuthTasks = resp.data.pageData
          }
        })
      },
      addFaceTask(){
        addFaceAuthTask().then(resp => {
          if(resp){
            this.initFaceAuthTasks()
            this.$message({
              message: '添加人脸授权任务成功',
              type: 'success'
            });
          }
        })
      },

      handleClose(tag) {
        // this.groupTags.splice(this.groupTags.indexOf(tag), 1);
      },
      handleSelectionChange(val){
        this.multipleSelection = val;
      },
      handleSizeChange(val){
        this.pageSize = val
      },
      handleCurrentChange(val){
        this.currentPage = val
      }
    }
  }
</script>

<style scoped>

</style>
